Created:01/03/2020
By: DynamicLayers
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!
Below is the general HTML structure of the landing page.
The template page's layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, work section you can showcase your portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Saas Startup App HTML Template">
<meta name="author" content="DynamicLayers">
<title>Truno | Saas Startup App HTML Template</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<link rel="stylesheet" href="css/fontawesome.min.css">
<link rel="stylesheet" href="css/themify-icons.css">
<link rel="stylesheet" href="css/elegant-line-icons.css">
<link rel="stylesheet" href="css/truno-icons.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/nice-select.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/slicknav.min.css">
<link rel="stylesheet" href="css/pricing-table.css">
<link rel="stylesheet" href="css/odometer.min.css">
<link rel="stylesheet" href="css/venobox/venobox.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body data-spy="scroll" data-target="#navmenu" data-offset="70">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="site-preloader-wrap">
<div class="spinner"></div>
</div><!-- Preloader -->
<header id="header" class="header-section">
</header><!--/. header-section -->
<section id="home" class="hero-section d-flex align-items-center">
</section><!--/. hero-section-->
<section id="feature" class="features-section padding">
</section><!--/. features-section -->
<section class="content-section pos-rel padding">
</section><!--/. content-section -->
<section class="counter-section">
</section><!--/. counter-section -->
<section id="screenshots" class="screenshot-section pos-rel padding">
</section><!--/. screenshot-section -->
<section class="content-section padding">
</section><!--/. content-section -->
<section id="reviews" class="testimonial-section padding">
</section><!--/. testimonial-section -->
<div class="sponsor-section padding">
</div><!--/. sponsor-section -->
<section id="pricing" class="pricing-section">
</section><!--/. pricing-section -->
<section class="download-section pos-rel padding">
</section><!--/. download-section -->
<footer class="widget-section">
</footer><!--/.widget-section-->
<a data-scroll href="#header" id="scroll-to-top"><i class="ti-arrow-up"></i></a>
<!-- jQuery Lib -->
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/tether.min.js"></script>
<script src="js/vendor/jquery.slicknav.min.js"></script>
<script src="js/vendor/owl.carousel.min.js"></script>
<script src="js/vendor/smooth-scroll.min.js"></script>
<script src="js/vendor/jquery.ajaxchimp.min.js"></script>
<script src="js/vendor/pricing-switcher.js"></script>
<script src="js/vendor/jquery.waypoints.v2.0.3.min.js"></script>
<script src="js/vendor/odometer.min.js"></script>
<script src="js/vendor/wow.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
The site is made of many sections like header, slider, testimonials, services and more...
<header id="header" class="header-section"> <div class="container"> <nav class="navbar "> <a href="index.html" class="navbar-brand"><img src="img/logo-dark.png" alt="Saasbiz"></a> <div class="d-flex menu-wrap"> <div id="mainmenu" class="mainmenu"> <ul class="nav"> <li><a data-scroll class="nav-link active" href="#home">Home<span class="sr-only">(current)</span></a> <ul> <li><a href="index.html">Home 01</a></li> </ul> </li> <li><a data-scroll href="#feature">Features</a></li> <li><a href="#">Blog</a> <ul> <li><a href="blog-grid.html">Blog Grid</a></li> </ul> </li> </ul> </div> <div class="header-right"> <a class="menu-btn" href="#">Get Started</a> </div> </div> </nav> </div> </header><!--/. header-section -->
<section id="home" class="hero-section d-flex align-items-center"> <div class="hero-moc"></div> <div class="anim-elements"> <div class="anim-element"></div> <div class="anim-element"></div> <div class="anim-element"></div> <div class="anim-element"></div> <div class="anim-element"></div> </div> <div class="container"> <div class="row hero-wrap d-flex align-items-center"> <div class="col-lg-6 col-md-8 sm-padding"> <div class="hero-content"> <h4><i class="fa fa-check"></i>#Editors Choice App Of 2020</h4> <h1>Best App For Your<br>Modern Lifestyle.</h1> <p>We provide marketing services to startups and small businesses to looking for a partner of their digital media, design & development, lead generation and communications requirents.</p> <div class="btn-group"> <a class="default-btn" href="#">Get Started<span></span></a> <a href="#" class="play-btn"><i class="fas fa-play"></i>How It Works?</a> </div> </div> </div> </div> </div> </section><!--/. hero-section-->
<section id="feature" class="features-section padding"> <div class="container"> <div class="section-heading text-center mb-40"> <h2>Truno Features</h2> <p>Make your awesome business idea a reality with Truno, the fresh new theme <br> from Mikado - custom made for modern startups.</p> </div> <div class="row"> <div class="col-md-4 col-sm-6 sm-padding"> <div class="features-item"> <i class="truno truno-chart color-red bg-red"></i> <h3 class="color-red">Data Analytics</h3> <p>We provide marketing service to startups businesses to looking for a partner digital media.</p> </div> </div> </div> </div> </section><!--/. features-section -->
<section class="content-section pos-rel padding"> <div class="left-pattern"></div> <div class="container"> <div class="row align-items-center"> <div class="col-md-6 text-right"> <img class="content-moc" src="img/content-moc-1.png" alt=""> </div> <div class="col-md-6"> <div class="content-info"> <h2>Simple Proven Way To Boost <br> Your Team Performance. </h2> <p>We provide marketing services to startups and small businesses to looking for a partner of their digital media, design & development, lead generation and communications requirents.</p> <a class="default-btn" href="#">Get Started<span></span></a> </div> </div> </div> </div> </section><!--/. content-section -->
<section class="counter-section"> <div class="container"> <div class="row"> <div class="col-lg-3 col-sm-6 sm-padding"> <div class="counter-item wow fadeInUp" data-wow-delay="200ms"> <i class="icon-download color-red"></i> <h3><span class="odometer" data-count="2589">00</span></h3> <h4>Tottal Downloaded</h4> </div> </div> </div> </div> </section><!--/. counter-section -->
<section id="screenshots" class="screenshot-section pos-rel padding"> <div class="right-pattern"></div> <div class="section-heading text-center mb-40"> <h2>Truno Screenshots</h2> <p>Make your awesome business idea a reality with Truno, the fresh new theme <br> from Mikado - custom made for modern startups.</p> </div> <div class="container"> <div class="row"> <div class="col-lg-10 offset-lg-1"> <div id="screenshot-carousel" class="screenshot-carousel owl-carousel"> <div class="screenshot-item"> <img src="img/app-ss-1.png" alt="img"> </div> </div> </div> </div> </div> </section><!--/. screenshot-section -->
<section class="content-section padding"> <div class="container"> <div class="row align-items-center"> <div class="col-md-6 xs-padding"> <div class="content-info"> <img src="img/content-1.png" alt="img"> </div> </div> <div class="col-md-6 xs-padding"> <div class="content-info"> <h2>Design And Build By The <br> Latest Code Integration. </h2> <p>We provide marketing services to startups and small businesses to looking for a partner of their digital media, design & development, lead generation and communications requirents.</p> <a class="default-btn" href="#">Get Started<span></span></a> </div> </div> </div> </div> </section><!--/. content-section -->
<section id="reviews" class="testimonial-section padding"> <div class="bg-shape-left"></div> <div class="container"> <div class="section-heading mb-40 text-center"> <h2>What People Say!</h2> <p>We provide marketing services to startups and small businesses to looking for a partner <br>of their digital media, design & development, lead generation.</p> </div> <div id="testimonial-carousel" class="testimonial-carousel owl-carousel"> <div class="testimonial-item"> <div class="testi-thumb"> <img src="img/testi-1.jpg" alt="img"> </div> <div class="author-details"> <div class="author-info"> <h3>Fiorella Ibáñez<span>Designer</span></h3> </div> <ul class="rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> </ul> </div> <p>We provide marketing services startups and small businesses to looking for a partner of their digital media, design development lead generation.</p> </div> </div> </div> </section><!--/. testimonial-section -->
<div class="sponsor-section padding"> <div class="container"> <div id="sponsor-carousel" class="sponsor-carousel owl-carousel"> <div class="sponsor-item"> <img src="img/sponsor-1.png" alt="sponsor"> </div> </div> </div> </div><!--/. sponsor-section -->
<section id="pricing" class="pricing-section"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6 xs-padding"> <div class="section-heading mb-40 wow fadeInUp" data-wow-delay="300ms"> <span>Explore The Plans</span> <h2>No Hidden Charges!</h2> <p>Make your awesome business idea a reality with Truno, the fresh new theme <br> from Mikado - custom made for modern startups.</p> </div> <div class="cd-pricing-switcher-container"> <div class="cd-pricing-switcher"> <p class="fieldset"> <input type="radio" name="duration-1" value="monthly" id="monthly-1" checked> <label for="monthly-1">Monthly</label> <input type="radio" name="duration-1" value="yearly" id="yearly-1"> <label for="yearly-1">Yearly</label> <span class="cd-switch"></span> </p> </div> </div> <!-- .cd-pricing-switcher --> </div> <div class="col-lg-6 xs-padding"> <div class="pricing-wrap cd-pricing-container"> <ul class="cd-pricing-list cd-bounce-invert row"> <li class="cd-popular col-lg-6"> <ul class="cd-pricing-wrapper"> <li data-type="monthly" class="is-visible pricing-box"> <div class="pricing-head"> <i class="truno truno-contract color-blue"></i> <h3>$29.00<span>Starter</span></h3> </div> <ul class="pricing-list"> <li>1024 MB Memory</li> <li>10 Websites</li> <li>Unlimited Bandwidth</li> <li>24/7 Support</li> </ul> <div class="pricing-footer"> <a class="default-btn" href="#">Subscribe Now<span></span></a> </div> </li> </ul> <!-- .cd-pricing-wrapper --> </li> <li class="col-lg-6"> <ul class="cd-pricing-wrapper"> <li data-type="yearly" class="is-hidden pricing-box"> <div class="pricing-head"> <i class="truno truno-network color-orange"></i> <h3>$69.00<span>Premium</span></h3> </div> <ul class="pricing-list"> <li>1024 MB Memory</li> <li>10 Websites</li> <li>Unlimited Bandwidth</li> <li>24/7 Support</li> </ul> <div class="pricing-footer"> <a class="default-btn" href="#">Subscribe Now<span></span></a> <h4>Or Start 14 Days Trial</h4> </div> </li> </ul> <!-- .cd-pricing-wrapper --> </li> </ul> <!-- .cd-pricing-list --> </div> </div> </div> </div> </section><!--/. pricing-section -->
<section class="download-section pos-rel padding"> <div class="anim-elements"> <div class="anim-element"></div> <div class="anim-element"></div> <div class="anim-element"></div> <div class="anim-element"></div> <div class="anim-element"></div> </div> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6 col-md-8 xs-padding"> <div class="download-content"> <h2 class="mb-20">Download Truno App Now!</h2> <p class="mb-30">Make your awesome business idea a reality with Truno, the fresh new theme <br> from Mikado - custom made for modern startups.</p> <div class="btn-group-left"> <a href="#"><img src="img/appstore.png" alt="appstore"></a> <a href="#"><img src="img/playstore.png" alt="playstore"></a> </div> </div> </div> <div class="col-lg-6 col-md-4 xs-padding"> <img src="img/content-2.png" alt="img"> </div> </div> </div> </section><!--/. download-section -->
<footer class="widget-section"> <div class="container"> <div class="row padding"> <div class="col-lg-3 col-sm-6 sm-padding"> <div class="widget-content"> <a href="#"><img src="img/logo-light.png" alt="brand"></a> <p>Building your own home is about desire, fantasy. But it’s achievable anyone can do it.</p> <ul class="widget-social"> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> </ul> </div> </div> <div class="col-lg-2 col-sm-6 sm-padding"> <div class="widget-content"> <h4>Company</h4> <ul class="widget-links"> <li><a href="#">About Us</a></li> </ul> </div> </div> <div class="col-lg-3 col-sm-6 sm-padding"> <div class="widget-content"> <h4>Headquaters</h4> <p>962 Fifth Avenue, 3rd Floor New York, NY10022</p> <span>Hello@dynamiclayers.net</span> <span>(+123) 456 789 101</span> </div> </div> <div class="col-lg-4 col-md-6 col-sm-12 sm-padding"> <div class="widget-content"> <h4>Newslatter Subscription</h4> <p>Subscribe and get 10% off from our <br>architecture company.</p> <div class="subscribe-box clearfix"> <div class="subscribe-form-wrap"> <form action="#" class="subscribe-form"> <input type="email" name="email" id="subs-email" class="form-input" placeholder="Enter Your Email Address..."> <button type="submit" class="submit-btn">Subscribe</button> <div id="subscribe-result"> <p class="subscription-success"></p> <p class="subscription-error"></p> </div> </form> </div> </div> </div> </div> </div> <div class="footer-section text-center"> <p>© <script> document.write(new Date().getFullYear())</script> Truno Powered by DynamicLayers</p> </div><!-- /.footer-section --> </div> </footer><!--/.widget-section-->
These are the css files:
This theme use these Javascript files:
bootstrap.min.js
smooth-scroll.min.js
owl.carousel.min.js
jquery.ajaxchimp.min.js
jquery-1.12.4.min.js
jquery.mb.YTPlayer.min.js
owl.carousel.min.js
venobox.min.js
wow.min.js
jquery.counterup.min.js
main.js
You can edit the contact.js files. for setting contact form
There are only one php code for contact page which is contact.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
DynamicLayers